<template>
  <div id="productRebateCustomer">
    <c-title text="我的客户"></c-title>
    <van-sticky>
      <van-search v-model="keyword" placeholder="会员ID/昵称" shape="round" @search="onSearch"></van-search>
    </van-sticky>

    <van-tabs v-if="!cateLoading" v-model="active" sticky offset-top="54" animated swipeable @click="onClickCate" line-width="20px" color="var(--themeBaseColor)">
      <van-tab v-for="item in cate" :title="item.name" :key="item.id" :name="item.id">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad()">
            <div class="main">
              <div class="list padding-10" v-for="item in list" :key="item.id">
                <div class="flex">
                  <div class="left">
                    <img :src="item.avatar_image" alt="" />
                  </div>
                  <div class="f-grow-1 margin-left-10 flex-column flex-j-sb">
                    <div class="f-15 color-000000 flex-a-c">
                      {{ item.nickname }}
                      <div class="f-12">（ID: {{ item.uid }}）</div>
                    </div>
                    <div class="f-13" v-if="item.agent_level_name">{{ item.agent_level_name }}</div>
                    <div class="f-13 flex-a-c" v-if="item.parent">
                      上级会员：{{ item.parent.nickname }}
                      <div class="f-12">（ID: {{ item.uid }}）</div>
                    </div>
                  </div>
                </div>

                <div class="margin-top-8 flex" style="flex-direction: row-reverse;" v-if="item.can_up">
                  <van-button @click.stop="toUpgrade(item.up_level_id, item.uid)" round type="info" size="mini" color="var(--themeBaseColor)" style="min-width: 60px;">升级</van-button>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <van-popup v-model="showLevelDialog" class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">选择升级等级</div>
      <div class="pop-base-content">
        <van-radio-group v-model="level_id">
          <van-cell-group inset>
            <van-cell :title="item.level_name" clickable data-index="index" @click="level_id = item.id" v-for="(item, index) in level_list" :key="item.id">
              <template #right-icon>
                <van-radio :name="item.id" checked-color="var(--themeBaseColor)" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div style="height: 40px;"></div>
      <div class="pop-base-bottom" @click.stop="subUpgrade">
        <van-button round type="danger" color="var(--themeBaseColor)" block style="height: 40px;">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cate: [
        {
          id: 0,
          name: "全部"
        }
      ],
      cateLoading: true, //分类是否正在加载
      keyword: "",
      active: 0,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      total_page: 0,
      list: [],

      showLevelDialog: false, // 升级等级弹窗
      level_id: "", // 选择的升级等级id
      level_list: [] // 升级等级列表
    };
  },

  activated() {},

  components: {},

  computed: {},
  created() {
    if (this.$route.params.id) {
      this.active = Number(this.$route.params.id);
    }
    this.cateLoading = false;
    //   this.getInit();
  },
  mounted() {},

  methods: {
    initData() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.list = [];
      this.page = 1;
    },
    //   getInit() {
    //     this.cate = [
    //       {
    //         id: 0,
    //         name: "全部"
    //       }
    //     ];
    //     $http
    //       .get("plugin.warehouse.frontend.controllers.purchasing.list.index", {})
    //       .then(response => {
    //         if (response.result === 1) {
    //           this.cate = this.cate.concat(response.data.types);
    //           this.cateLoading = false;
    //         } else {
    //           this.$toast(response.msg);
    //         }
    //       })
    //       .catch(err => {
    //         console.log(err);
    //       });
    //   },

    getData() {
      $http
        .get("plugin.product-rebate.frontend.controllers.agent.my-customer", { keyword: this.keyword, page: this.page })
        .then(response => {
          this.refreshing = false;
          this.loading = false;
          if (response.result === 1) {
            this.list = this.list.concat(response.data.data);
            this.total_page = response.data.last_page;
            this.page = this.page + 1;
            if (response.data.current_page == response.data.last_page) {
              this.finished = true;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onLoad() {
      this.getData();
    },
    onRefresh() {
      this.initData();
      this.getData();
    },
    onClickCate() {
      this.initData();
      this.getData();
    },
    onSearch() {
      this.initData();
      this.getData();
    },
    toUrl(_name, _params = {}, _query = {}) {
      if (_name) this.$router.push(this.fun.getUrl(_name, _params, _query));
    },
    toUpgrade(id, uid) {
      this.level_id = id;
      this.up_member_id = uid;
      // 为0时点击升级需要弹窗获取升级等级，不为0时点击升级直接请求升级接口
      if (id) {
        this.$dialog
          .confirm({
            title: "提示",
            message: "确认进行升级"
          })
          .then(() => {
            // on confirm
            this.subUpgrade();
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.getUpgradeLevel();
      }
    },
    async subUpgrade() {
      if (!this.level_id) {
        this.$toast("请选择升级等级");
        return;
      }
      let { result, msg, data } = await $http.get(
        "plugin.product-rebate.frontend.controllers.agent.change-member-level",
        {
          up_member_id: this.up_member_id,
          level_id: this.level_id
        },
        "."
      );
      this.$toast(msg);
    },
    async getUpgradeLevel() {
      let { result, msg, data } = await $http.get(
        "plugin.product-rebate.frontend.controllers.agent.get-upgrade-level",
        {
          up_member_id: this.up_member_id
        },
        "."
      );
      if (result == 0) this.$toast(msg);
      this.level_list = data;
      this.showLevelDialog = true; // 显示升级等级弹窗
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#productRebateCustomer {
  .main {
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
    min-height: 10vh;

    .list {
      background-color: #fff;
      border-radius: 0.375rem;
      overflow: hidden;
      margin-bottom: 0.75rem;
      text-align: left;
    }

    .left {
      img {
        width: 4rem;
        height: 4rem;
        display: block;
        margin: 0;
        border-radius: 2rem;
        background-color: #f5f5f5;
      }
    }
  }
}
.pop-base-class .pop-base-title {
  margin: 18px 12px 12px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-align: left !important;
}
.pop-base-class .pop-base-content {
  min-height: 45vh;
  max-height: 60vh;
  overflow: scroll;
  padding: 0 0px 60px;
}
.pop-base-class .pop-base-bottom {
  padding: 10px 14px;
  background: #ffffff;
}
</style>
